<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <body>
        <!-- 准备好一个容器 -->
        <div id="test"></div>
        <!-- 引入react库(基于react16.4) -->
        <script src="../js/react.development.js"></script>
        <script src="../js/react-dom.development.js"></script>
        <!-- 引入babel, 将jsx转为js -->
        <script src="../js/babel.min.js"></script>
    
    
        <script type="text/babel"> /* 此处一定要写babel, 因为是jsx内容 */
            // 1. 创建类式组件, 通过继承React.Component,  类组件适用于复杂组件, 有状态 state
            class MyComponent extends React.Component {
                constructor(props){
                    super(props);
                    // 初始化时使用构造器初始化数据
                    this.state = {
                        isHot: true,
                        wind: '微风'
                    }
                    // 这一步处理函数内部无法使用this的问题
                    this.change = this.changeWeather.bind(this)
                }
                render(){
                    const {isHot, wind} = this.state;
                    return <h2 onClick={this.change}>今天天气很{isHot?'炎热':'凉爽'},{wind}</h2>
                }
                changeWeather(){
                    const isHot = this.state.isHot
                    // 修改state必须使用setState, setState是局部替换, 只替换同名参数
                    this.setState({isHot: !isHot})
                }
            }
            // 2. 渲染组件到页面
            ReactDOM.render(<MyComponent/>, document.getElementById('test'))
            
    
        </script>
    </body>
</body> 
</html>